<template>
  <div class="used">
    <div v-for="form in forms"  :key="form.id" @click="openForm(form.id)" style="width: 120px; height: 120px" >
      <div class="use svg" >
        <div class="image-container">
          <el-image
            :src="imgurl"
            class="use image">
          </el-image>
        </div>
      </div>
      <div class="use title" >
        {{ form.name }}
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      imgurl: require('@/views/contract/img/contractimg.png'),
      forms: [
        { id: 1, name: '广告申请单', url: '/#/contract/template/ledapply' },
        { id: 2, name: '测试申请单', url: '/#/contract/template/test' }
        // 添加更多表单...
      ]
    }
  },
  methods: {
    openForm(formId) {
      const form = this.forms.find(form => form.id === formId)
      if (form) {
        window.open(form.url, '_blank')
      }
    }
  }
}
</script>
<style>
.used {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
}

.use.svg {
  margin: 12px;
  align-content: center;
}

.use.title {
  margin: 10px;
  text-align: center;
  font-size: 12px;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
}
</style>
